<template>
  <div>
    <div v-if="list.length > 0">
      <section v-for="(item,index) in list" :key="index" v-if="item.choose">
        <div class="flex-row">
          <div class="flex-row--b">
            <h1 class="block-title ell">{{item.majorName}}</h1>
            <p class="c-ad">{{item.grade}} {{item.schoolingTime && item.schoolingTime + '年'}}</p>
          </div>
          <div class="major-close" @click="deleteMajor(item, index);">×</div>
        </div>
        <div class="footer">
          <div class="footer-title"><span class="c-blue">{{item.collegeCnt || 0}} </span>个备选大学</div>
          <ul v-if="item.collegeCnt > 0">
            <li v-for="(school,i) in item.firstCollegeListBeans" :key="i" v-if="!school.choose">
              <div @click="deleteSchool(item,index,school,i);item.collegeCnt = item.collegeCnt - 1">
                <span :class="'c-'+school.chongShouBao.id">
                  {{school.chongShouBao.name}}{{school.chongShouBao.id!==4?school.probability+'%':school.probability}}
                </span>
                <p class="ell">{{school.collegeName}}</p>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <paginate v-if="totalElements>15" :total="totalElements" :pagegroup="3" :current-page="page" @pagechange="pagechange" :display="params.size"></paginate>
    </div>
    <no-content v-else :text="text"></no-content>
  </div>
</template>

<script>
import { api } from '@/utils'
export default {
  data () {
    return {
      text: '正在加载...',
      list: [],
      params: {
        size: 15,
        page: 0
      },
      totalElements: 0,
      page: 1
    }
  },
  methods: {
    getAlternative () {
      this.params._ = (new Date()).getTime() // IE下会缓存，加个时间戳禁止缓存
      this.$axios.get(api.queryFirstChooseMajor, { params: this.params }).then(data => {
        if (data !== '') {
          if (data.content.length) {
            data.content.forEach(item => {
              item.active = false
              if (!item.chongShouBao) {
                item.chongShouBao = {
                  id: 4,
                  name: '数据缺失'
                }
              }
              // if (!item.probability) {
              //   item.probability = 0
              // }
              if (!this.type) {
                if (item.firstCollegeListBeans) {
                  item.firstCollegeListBeans.forEach(item => {
                    if (!item.chongShouBao) {
                      item.chongShouBao = {
                        id: 4,
                        name: '数据缺失'
                      }
                    }
                    // if (!item.probability) {
                    //   item.probability = 0
                    // }
                  })
                }
              }
            })
            this.list = data.content
            this.totalPages = data.totalPages
            this.totalElements = data.totalElements
            // 如果是初次进来，就存住大学原始数量
            // if (type === 'init') {
            //   this.schoolNum = data.totalElements
            // }
            // 加载状态结束
            this.loading = false
            if (this.list.length >= this.totalElements) {
              this.finished = true
              this.text = '已加载全部数据'
            } else {
              this.text = ''
              this.finished = false
            }
          } else {
            this.text = '暂无数据'
            this.list = []
            this.totalPages = 0
            this.totalElements = 0
          }
        } else {
          this.text = '暂无数据'
          this.list = []
          this.totalPages = 0
          this.totalElements = 0
          this.schoolNum = 0
        }
        console.log(this.list)
      }).catch(err => {
        console.log(err)
        this.text = '网络走丢了，请稍后重试！'
      })
    },
    deleteMajor (item, index) {
      let _sum = this.$store.state.majorSum - 1
      this.$store.commit('setMajorSum', _sum)

      this.list.splice(index, 1)
      if (this.list.length === 0) this.text = '暂无数据'

      let params = {
        id: item.id
        // collegeId: school.collegeId,
        // enrollStudentPlansId: school.enrollStudentPlansId
      }
      this.$axios.post(api.delFirstMajor, params).then(data => {
        this.$message.success('成功删除专业')
      }).catch(data => {
        this.$message.error('网络走丢了，请稍后重试！')
        this.getAlternative()
      })
    },
    deleteSchool (item, index, school, i) {
      let _schoolList = item.firstCollegeListBeans
      _schoolList.splice(i, 1)
      this.$set(this.list[index], 'enrollStudentPlans', _schoolList)

      let params = {
        id: item.id,
        collegeId: school.collegeId,
        enrollStudentPlansId: school.enrollStudentPlansId
      }
      this.$axios.post(api.delMajorFirstCollege, params).then(data => {
        this.$message.success('成功删除学校')
      }).catch(data => {
        this.$message.error('网络走丢了，请稍后重试！')
        this.getAlternative()
      })
    },
    pagechange (currentPage) {
      this.page = currentPage
      this.params.page = currentPage - 1
      this.getAlternative()
    }
  }
}
</script>

<style scoped lang="scss">
  .mr5{margin-right:5px;}
  section{
      padding:20px 0 10px;
      border-bottom:1px solid $line;
      .block-title{
        margin-right:5px;
        max-width:250px;
      }
      .major-close{
        font-size:40px;
        width:50px;
        height:33px; line-height:33px;
        text-align:center;
        color:#d6d6d6;
        margin-left:auto;
        cursor:pointer;
        &:hover{
          color:$assertive;
        }
      }
      .footer{
        margin-top:5px;
        border:1px solid $line;
        .footer-title{
          background:$gray-bg;
          height:22px; line-height:20px;
          font-size:14px;
          padding-left:10px;
          color:#69707F;
        }
        ul{
          border-top:1px solid $line;
          display:flex;
          flex-wrap:wrap;
          padding:4px 5px;
          li{
            width:50%;
            padding:4px 5px;
            >div{
              position:relative;
              cursor:pointer;
              height:22px; line-height:20px;
              border:1px solid $line;
              display:flex;
              padding-right:20px;
              color:$stable-ad;
              &:hover{
                border:1px solid $assertive;
                color:$assertive;
              }
              span{
                padding-left:5px;
                // color:$assertive;
                font-size:10px;
                min-width:50px;
              }
              p{
                color:#69707F;
                font-size:14px;
              }
              &:after{
                position:absolute; top:0px; right:0px;
                width:20px; text-align:center;
                content:"×";
                display:block;
              }
            }
          }
        }
      }
    }
  /deep/ .pagination {
    margin-top: 20px;
    li {
      margin-right: 0;
      > a {
        padding: 0 3px;
      }
    }
  }
</style>
